<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script crossorigin src="../js/react.production.min.js"></script>
    <!-- 核心库  最先引用 -->
    <script crossorigin src="../js/react-dom.production.min.js"></script>
    <!-- 引用react-dom 用于支持react操作DOM -->
    <script crossorigin src="../js/babel.min.js"></script>
    <!-- 引入babel 用于将jsx转为js -->
    <title>学习react</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/babel"> // 此处一定要写babel
        /*
            1.通过onXxx属性指定时间处理函数（注意大小写）
                a.React使用的是自定义（合成）事件，而不是原生的DOM事件 ————为了更好的兼容性
                b.React中的事件委托的方式处理的（委托给组件最外层的元素）————为了高效
            2.通过event.target得到发生事件的DOM元素对象————不要多度使用ref
        */

        // 受控事件
        class VDOM extends React.Component {
            state = {  // 
                name: '',
                password: '',
            }
            demo = (type) => {
                /*
                    高阶函数：如果一个函数符合下面2个规范中的任意一个，那该函数就是高阶函数
                        1.若a函数 接受的参数是一个函数 那么a就可以陈志伟高阶函数
                        2.若a函数 调用的返回值依然是一个函数 那么a就可以称之为高阶函数
                        常见的高阶函数 promise setTimeout arr.map
                    函数的柯里化 通过调用继续返回函数的方式 实现多次接受参数最后统一处理的函数编码形式
                */
                return (event) => {
                    this.setState({ [type]: event.target.value })
                }
            }

            handleSubmit = (event) => {
                event.preventDefault();
                console.log(this.state);
            }
            render() {
                return (
                    <form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
                        用户名：<input onChange={this.demo('name')} type="text" name="username" />
                        密码：<input onChange={this.demo('password')} type="password" name="password" />
                        <button>登录</button>
                    </form>
                )
            }
        }

        // 非受控事件
        // class VDOM extends React.Component {
        //     handleSubmit = (event) => {
        //         event.preventDefault();
        //         console.log(this.refs.username.value);
        //         console.log(this.refs.password.value);
        //     }
        //     render() {
        //         return (
        //             <form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>
        //                 用户名：<input ref="username" type="text" name="username" />
        //                 密码：<input ref="password" type="password" name="password" />
        //                 <button>登录</button>
        //             </form>
        //         )
        //     }
        // }
        ReactDOM.render(<VDOM />, document.getElementById('test')) //渲染
    </script>
</body>

</html>